<template>
  <div style="overflow: hidden;">
    <div style="height:50px;">
      <img src="@/assets/项目图标.png" style="width:40px;position: absolute;top:5px;left:8px;"/>
      <h3 style="position: absolute;font-weight: 1000;font-size: 17px;left:50px;top:5px;">敏捷AI备课</h3>
      <label style="position: absolute;font-size: 10px;left:50px;top:27px;">Teaching integration</label>
    </div>
    <div>
      <el-col >
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <el-sub-menu index="1" >
            <template #title >
              <el-icon><Menu /></el-icon>
              <span class="name" >系统管理</span>
            </template>
              <el-menu-item index="1-1"  style="height:45px;">
                <el-icon><Folder /></el-icon>
                <span class="name">文档管理</span>
              </el-menu-item>
              <el-menu-item index="1-2" style="height:45px;">
                <el-icon><Collection /></el-icon>
                <span class="name">日志管理</span>
              </el-menu-item>
              <el-menu-item index="1-3" style="height:45px;">
                <el-icon><Document /></el-icon>
                <span class="name">数据管理</span>
              </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="2" @click="ToHomePage">
            <el-icon><PhoneFilled /></el-icon>
            <span class="name">首页</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><PhoneFilled /></el-icon>
            <span class="name">教学帮手</span>
          </el-menu-item>
          <el-menu-item index="4" @click="ToClassManage">
            <el-icon><PhoneFilled /></el-icon>
            <span class="name">课程分析</span>
          </el-menu-item>
          <el-menu-item index="5" @click="ToQuestionGeneration">
            <el-icon><PhoneFilled /></el-icon>
            <span class="name">练习题生成</span>
          </el-menu-item>
          <el-menu-item index="6" @click="ToAITeach">
            <el-icon><PhoneFilled /></el-icon>
            <span class="name">教学设计自动化</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Document,
  Collection,
  Menu,
  Folder ,
  Location,
  Setting,
  PhoneFilled,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter();
function ToHomePage(){
  if (router.currentRoute.value.path !== "/") {
        router.replace( "/");
      }
}
function ToClassManage(){
  if (router.currentRoute.value.path !== "/ClassManager") {
        router.replace( "/ClassManager");
      }
}
function ToQuestionGeneration(){
  if (router.currentRoute.value.path !== "/QuestionGeneration") {
        router.replace( "/QuestionGeneration");
      }
}
function ToAITeach(){
  if (router.currentRoute.value.path !== "/AITeach") {
        router.replace( "/AITeach");
      }
}
</script>

<style scooped>
.name{
  font-size: 12px;
}
.el-menu-vertical-demo .el-menu-item {
  height:45px; 
}
.el-sub-menu__title {
  height: 45px !important;
}
</style>